<template>
	<view>
			<u-form
				:model="model1"
				ref="uForm"
				class="ml-20 mr-20 formSty"
			>
				<view v-if="allInfo.is_virtual == 1" class="contentBg mt-24">
					<u-form-item
						:border-bottom="false"
						prop="bank_name"
						:required="true"
						:label="$t('银行名称')"
						label-position="top"
						class="titleSty"
					>
					<u-input v-model="model1.bank_name" type="text" :placeholder="$t('请输入银行名称')" :border="true" :auto-height="true" class="rounded-26" />
					</u-form-item>
					<u-form-item
						:border-bottom="false"
						prop="bank_address"
						:required="true"
						:label="$t('开户行')"
						label-position="top"
						class="titleSty"
					>
					<u-input v-model="model1.bank_address" type="text" :placeholder="$t('请输入开户行')" :border="true" :auto-height="true" class="rounded-26" />
					</u-form-item>
					<u-form-item
						:border-bottom="false"
						prop="name"
						:required="true"
						:label="$t('持卡人姓名')"
						label-position="top"
						class="titleSty"
					>
					<u-input v-model="model1.name" type="text" :placeholder="$t('请输入持卡人姓名')" :border="true" :auto-height="true" class="rounded-26" />
					</u-form-item>
					<u-form-item
						:border-bottom="false"
						prop="bank_number"
						:required="true"
						:label="$t('银行卡号')"
						label-position="top"
						class="titleSty"
					>
					<u-input v-model="model1.bank_number" type="text" :placeholder="$t('请输入银行卡号')" :border="true" :auto-height="true" class="rounded-26" />
					</u-form-item>
					<u-form-item
						:border-bottom="false"
						prop="phone"
						:required="true"
						:label="$t('联系电话')"
						label-position="top"
						class="titleSty"
					>
					<u-input v-model="model1.phone" type="text" :placeholder="$t('请输入联系电话')" :border="true" :auto-height="true" class="rounded-26" />
					</u-form-item>
					<u-form-item
						:border-bottom="false"
						label-position="left"
						class="titleSty"
					>
						<u-radio-group v-model="agreementFlag" class="">
							<u-radio
								@change="radioChange" 
								v-for="(item, index) in list"
								:key="index" 
								:name="item.name"
								:disabled="item.disabled"
							>
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
			</view>
				<view v-else-if="allInfo.is_virtual == 0" class="contentBg mt-24">
					<u-form-item
						:border-bottom="false"
						prop="name"
						:required="true"
						:label="$t('姓名')"
						label-position="top"
						class="titleSty"
					>
					<u-input v-model="model1.name" type="text" :placeholder="$t('请输入人姓名')" :border="true" :auto-height="true" class="rounded-26" />
					</u-form-item>
					<u-form-item
						:border-bottom="false"
						prop="phone"
						:required="true"
						:label="$t('联系电话')"
						label-position="top"
						class="titleSty"
					>
					<u-input v-model="model1.phone" type="text" :placeholder="$t('请输入联系电话')" :border="true" :auto-height="true" class="rounded-26" />
					</u-form-item>
					<u-form-item
						:border-bottom="false"
						prop="address"
						:required="true"
						:label="$t('地址详情')"
						label-position="top"
						class="titleSty"
					>
					<u-input v-model="model1.address" type="textarea" :placeholder="$t('请输入地址详情')" :border="true" :auto-height="true" class="rounded-26" />
					</u-form-item>
				</view>
			</u-form>
			<view class="footer_btn4">
				<button class="btn_blue" :disabled="btnDis" @click="submit">{{$t('提交')}}</button>
			</view>
	</view>
</template>

<script>
	import { scoreExchange, getUserHomepage } from '@/api/basic'
	export default {
		props:['allInfo'],
		data() {
			return {
				agreementFlag: '',
				list: [
					{
						name: this.$t('我确定此账号为我同意的收款账号，我将自行承担所有责任'),
						disabled: false
					}
				],
				btnDis: false,
				model1: {
					score: '0',
					user_id: uni.getStorageSync("user_id"),
					goods_id: '',
					name: '',
					phone: '',
					address: '',
					bank_name: '',
					bank_address: '',
					bank_number: '',
				},
				rulesProduct:{
					name: [
						{ 
							required: true, 
							message: this.$t('请填写持卡人姓名'), 
							trigger: ['change'],
						}
					],
					phone: [
						{ 
							required: true, 
							message: this.$t('请填写联系电话'), 
							trigger: ['change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return /^[0-9]*$/.test(value);
							},
							message: this.$t('手机号码不正确'),
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					address: [
						{ 
							required: true, 
							message: this.$t('请填写地址'), 
							trigger: ['change'],
						}
					],
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: this.$t('请填写持卡人姓名'), 
							trigger: ['change'],
						}
					],
					phone: [
						{ 
							required: true, 
							message: this.$t('请填写联系电话'),
							trigger: ['change'],
						},
						// {
						// 	// 自定义验证函数，见上说明
						// 	validator: (rule, value, callback) => {
						// 		// 上面有说，返回true表示校验通过，返回false表示不通过
						// 		// this.$u.test.mobile()就是返回true或者false的
						// 		return this.$u.test.mobile(value);
						// 	},
						// 	message: this.$t('手机号码不正确'),
						// 	// 触发器可以同时用blur和change
						// 	trigger: ['change','blur'],
						// }
					],
					bank_name: [
						{ 
							required: true, 
							message: this.$t('请填写银行名称'), 
							trigger: ['change'],
						}
					],
					bank_address: [
						{ 
							required: true, 
							message: this.$t('请填写开户行'), 
							trigger: ['change'],
						}
					],
					bank_number: [
						{ 
							required: true, 
							message: this.$t('请填写银行卡号'), 
							trigger: ['change'],
						}
					],
				}
			}
		},
		// 因为是vue组件引入方式,vue内没有onReady，所以校验方式用mounted
		mounted() {
			if(this.$props.allInfo.is_virtual == 1) {
				this.$refs.uForm.setRules(this.rules)
			} else if (this.$props.allInfo.is_virtual == 0) {
				this.$refs.uForm.setRules(this.rulesProduct)
			}
			// allInfo.is_virtual == 1 换钱
			// is_virtual == 0 换商品
		},
		methods: {
			submit() {
				this.model1.score = this.$props.allInfo.score
				this.model1.goods_id = this.$props.allInfo.id
			
					this.$refs.uForm.validate(valid => {
					console.log('vali', valid)
						if (valid) {
							if (this.$props.allInfo.is_virtual == 1) {
								if (this.agreementFlag) {
									this.btnDis = true
									uni.showLoading({
										title: this.$t('提交中')
									});
									scoreExchange({...this.model1}).then(res => {
										console.log('res88888', res,)
										// if (res.data.data == 200) {
										if (res.statusCode == 200) {
											this.$emit('close-upop', false)
											uni.$u.toast(this.$t(res.data.msg))
											if(res.data.msg == '积分不足'){
												this.$emit('close-upop', false)
												setTimeout(()=>{
													uni.navigateTo({
														url: '/pages/vip/scorePoint',
														webview: 'zWebView'
													})
												},1000)
													
											}else{
												setTimeout(()=>{
													uni.navigateTo({
														url: '/pages/tabbar/newUser/Mall/mallSuccess'
													})
												},1000)
											}
											
											
										}
										uni.hideLoading()
										this.btnDis = false
									})
									.catch(() => {
										this.$emit('close-upop', false)
									})
								} else {
									uni.$u.toast(this.$t('请勾选协议'))
								}
							} else {
								this.btnDis = true
								uni.showLoading({
									title: this.$t('提交中')
								});
								scoreExchange({...this.model1}).then(res => {
									console.log('res889999888', res,res.statusCode)
									// if (res.data.data == 200) {
									if (res.statusCode == 200) {
										this.$emit('close-upop', false)
										uni.$u.toast(this.$t(res.data.msg))
											if(res.data.msg == '积分不足'){
												this.$emit('close-upop', false)
												setTimeout(()=>{
													uni.navigateTo({
														url: '/pages/vip/scorePoint',
														webview: 'zWebView'
													})
												},1000)
											}else{
												setTimeout(()=>{
														uni.navigateTo({
															url: '/pages/tabbar/newUser/Mall/mallSuccess'
														})
												},1000)
											}
												
									} else {
										uni.showToast({
											title: res.data.msg || ''
										})
										setTimeout(() => {
											uni.navigateTo({
												url: '/pages/vip/scorePoint',
												webview: 'zWebView'
											})
										}, 500)
									}
									uni.hideLoading()
									this.btnDis= false
								})
								.catch(() => {
									this.$emit('close-upop', false)
								})
							}
							
						} else {
							uni.$u.toast(this.$t('请检查是否有未上传内容'))
						}
					})
			},
			radioChange(e) {
				console.log('eeeeee', e)
				this.agreementFlag = e
			},
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
.formSty {
		padding-bottom: 150rpx;
		/deep/ .u-form-item__body {
			padding: 0;
			border: none !important;
		}
		/deep/ .u-radio__label {
			font-size: 20rpx;
			color:#666;
		}
	}
	.contentBg {
		background-color: #fff;
		padding: 0 24rpx;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		border-radius: 18px;
		padding-bottom: 35rpx;
		/deep/ .u-form-item__body__right__message {
			margin-left: 0 !important;
		}
		/deep/ .u-icon__icon {
			font-size: 28rpx !important;
		}
		/deep/ .u-border-bottom{
			position: inherit;
		}
		/deep/.u-radio {
			// width: 26rpx !important;
			// height: 26rpx !important;
		}
		/deep/ .u-add-wrap {
			// display: none !important;
			color: #D9D9D9;
			font-size: 20rpx;
		}
		/deep/ .u-add-tips {
			display: none !important;
		}
	}
	.titleSty {
		color: #262728;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 600;
		// padding-top: 34rpx;
		margin-left: 14rpx;
	}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		.btn_blue{
			width: 97%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_drak {
			width: 97%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: #E8E8E8;
			color: #333333;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
	}
</style>
